import "./styles.css";
import { Menu, MenuItem } from "./Dropdown";
import React from 'react'
export default function App() {
  return (
    <>
      <h1>Floating UI Dropdown Menu</h1>

      <Menu label="Edit">
        <MenuItem label="Undo" />
        <MenuItem label="Redo" />
        <MenuItem label="Cut" disabled />
        <Menu label="Copy as">
          <MenuItem label="Text" />
          <MenuItem label="Video" />
          <Menu label="Image">
            <MenuItem label=".png" />
            <MenuItem label=".jpg" />
            <MenuItem label=".svg" />
            <MenuItem label=".gif" />
          </Menu>
          <MenuItem label="Audio" />
        </Menu>
        <Menu label="Share">
          <MenuItem label="Mail" />
          <MenuItem label="Instagram" />
        </Menu>
      </Menu>

      <h3>ARIA Authoring Practices Guide</h3>
      <a
        target="_blank"
        href="https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/"
        rel="noreferrer"
      >
        Menu Button
      </a>
    </>
  );
}
